<?php

namespace App\NaiveUI;

use LowCode\Naive;

class Grid
{
    public static function example(): Naive\Flex
    {
        return Naive::flex([
            Naive::card("24栏布局",self::basic())->bordered(false),
        ]);
    }

    public static function basic(): Naive\Grid
    {
        $colors = [];
        for ($i = 1;$i<=12;$i++){
            $colors[] = sprintf("#%02x%02x%02x", rand(0, 230), rand(0, 230), rand(0, 230));
        }
        $grid = Naive::grid(12, 10, 10)->state("colors",$colors);
        $styles = jsExp("{ background: state.colors[this.index], color: '#ffffff', textAlign:'center' }");
        $box = Naive::el()->styles($styles)->children(jsExp("this.index+1"));
        $grid->item($box)->vFor(12);
        return $grid;
    }
}
